<!--
 * @Description:
 * @LastEditTime: 2022-09-15 10:06:29
 * @LastEditors: 刘仁秀
 * @Author: 刘仁秀
 * @Date: 2022-09-02 15:21:16
-->
<template>
	<view>
		<v-tabs v-model="current"
		 class="tabsStyle" 
		 :tabs="list" 
		 field="name"
		  @change="changeTab">
		</v-tabs>
		<!-- 首页底部合同详情 -->
		<view class="indexBottom">
			<!-- 原合同项 -->
			<!-- <view class="contractItem">
				<view class="contractLeft">
					<image class="contractItemImage" src="@/static/index/contractItem.png"></image>
				</view>
				<view class="contractRight">
					<view class="contractRightTop">
						<view class="contractText">测试合同</view>
						<view class="contractStatus">
							<uni-tag text="签署中" type="warning" />
						</view>
					</view>
					<view class="contractRightBottom">
						<view class="contractPeople">发起人：黄天军</view>
						<view class="contractTime">2023/07/03 21:15</view>
					</view>
				</view>
			</view> -->
			<!-- 现合同项 -->
			<view class="DataList">
				<view class="contractItem" v-for="(item, index) in contractForm" v-show="isHaveContract">
					<view class="contractLeft">
						<image class="contractItemImage" src="@/static/index/contractItem.png"></image>
					</view>
					<view class="contractRight">
						<view class="contractRightTop">
							<view class="contractText">{{item.contractName}}</view>
							<view class="contractStatus">
								<uni-tag text="发起状态" v-if="item.approvalStatus == -1" 
								custom-style="background-color: #5FE2D9; border-color: #5FE2D9; color: #fff;">
								</uni-tag>
								<uni-tag text="草稿中" v-if="item.approvalStatus == 0"
								custom-style="background-color: #ffac61; border-color: #ffac61; color: #fff;">
								</uni-tag>
								<uni-tag text="已过期" v-else-if="item.approvalStatus == 1" 
								custom-style="background-color: #ea1b29; border-color: #ea1b29; color: #fff;">
								</uni-tag>
								<uni-tag text="已撤销" v-else-if="item.approvalStatus == 2" 
								custom-style="background-color: #cccccc; border-color: #cccccc; color: #fff;">
								</uni-tag>
								<uni-tag text="签署中" v-else-if="item.approvalStatus == 3"
								custom-style="background-color: #5596f4; border-color: #5596f4; color: #fff;">
								</uni-tag>
								<uni-tag text="已完成" v-else-if="item.approvalStatus == 4"
								custom-style="background-color: #0cb618; border-color: #0cb618; color: #fff;">
								</uni-tag>
								<uni-tag text="已删除" v-else-if="item.approvalStatus == 5"
								custom-style="background-color: #fe2104; border-color: #fe2104; color: #fff;">
								</uni-tag>
								<uni-tag text="已归档" v-else-if="item.approvalStatus == 6"
								custom-style="background-color: #04fe32; border-color: #04fe32; color: #fff;">
								</uni-tag>
							</view>
						</view>
						<view class="contractRightBottom">
							<view class="contractPeople">发起人：{{item.creatorUser}}</view>
							<view class="contractTime">截止时间：{{item.contractDeadline}}</view>
						</view>
					</view>
				</view>
				<view class="noData" v-show="!isHaveContract">
					<image class="noDataImg" src="../../static/noData.png"></image>
					<view>暂无合同</view>
				</view>
			</view>
		
		</view>
		<!-- 悬浮的＋号 -->
		<uni-fab ref="fab" :pattern="pattern" :horizontal="horizontal" :vertical="vertical"
					:direction="direction" @trigger="trigger"  />
	</view>

</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				vertical: 'bottom',
				horizontal: 'right',
				direction: 'horizontal',
				isHaveContract: false,
				pattern: {
					backgroundColor: 'CCCCCC',
					buttonColor: '#59d8f1'
				},
				list: [{
						id: 0,
						state: '',
						self: '',
						name: '我发起的',
						flag: "owner",
					},
					{
						id: 1,
						state: 0,
						self: 1,
						name: '我收到的',
						flag: "receive",
					},
					{
						id: 2,
						state: 0,
						self: 0,
						name: '草稿',
						flag: "draft",
					},
					{
						id: 3,
						state: 1,
						self: '',
						name: '待我操作',
						flag: "operated-by-me",
					},
					{
						id: 4,
						state: 2,
						self: '',
						name: '待他人操作',
						flag: "operated-by-other",
					},
					{
						id: 5,
						state: 3,
						self: '',
						name: '已归档',
						flag: "document",
					},
					
				],
				userInfo: {},
				params: {
					pageNum: 1,
					pageSize: 10,
					state: '', // 0待处理,1已完成,2已拒签,3已撤销,4已逾期
					self: '', // 0查询他人,1查询自己,不传查询所有
				},
				hasMore: false,
				loading: true,
				// 合同草稿数量
				draftContractNum: 0,
				// 待我操作合同数量
				operatedByMeNum: 0,
				// 待他人操作合同数量
				operatedByOtherNum: 0,
				dataForm: {
					id: "",
					flag: "owner"
				},
				// 合同信息
				contractForm: [],
				
			};
		},
		computed: {
			
		},
		created(){
			// 获取导航栏的各种状态数量
			this.getDraftContractNum();
			this.getOperatedByMeNum();
			this.getOperatedByOtherNum();
			// 获取我发起合同状态的合同
			this.getStartContract(this.dataForm)
		},
		mounted() {
			// setTimeout(() => {
			// 	this.list[2].name = '草稿(' + this.draftContractNum + ')'
			// 	this.list[3].name = '待我操作(' + this.operatedByMeNum + ')'
			// 	this.list[4].name = '待他人操作(' + this.operatedByOtherNum + ')'
			// }, 100)
			  
			
		},
		
		methods: {
			// 获取
			changeTab(index) {
				console.log('当前选中的项：' + index)
				let dataForm = {
					id: "",
					flag: this.list[index].flag
				}
				this.getStartContract(dataForm)
			},
			// 获取草稿数量
			async getDraftContractNum() {
				// 这里随便定义的一个状态，在后台判断的逻辑是else里面的
				let approvalStatus = 0
				const response = await this.$api.index.getContractNum(approvalStatus);
				console.log('数据结果', response)
				this.draftContractNum = response.data.data
				console.log("草稿合同数量", this.draftContractNum)
				                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           
			},
			// 获取待我操作文档数量
			async getOperatedByMeNum() {
				// 这里随便定义的一个状态，在后台判断的逻辑是else里面的
				let approvalStatus = 3
				const response = await this.$api.index.getContractNum(approvalStatus);
				console.log('数据结果', response)
				this.operatedByMeNum = response.data.data 
				console.log("获取待我操作文档数量", this.operatedByMeNum)																																																																																																																																																																																																																																																											
			},
			//获取待他人操作文档数量
			async getOperatedByOtherNum() { 
				// 这里随便定义的一个状态，在后台判断的逻辑是else里面的
				let approvalStatus = 9
				const response = await this.$api.index.getContractNum(approvalStatus);
				console.log('数据结果', response)
				this.operatedByOtherNum = response.data.data
				console.log("获取待他人操作文档数量", this.operatedByOtherNum)																																																																																																																																																																																																																							
			},
			// 获取各种状态的合同
			async getStartContract(dataForm) {
				const response = await this.$api.contract.getContractByStatus(dataForm);
				console.log('数据结果', response)
				let contractForm = response.data.data.list
				if (contractForm.length===0) {
					// 如果数组对象为空
					this.isHaveContract = false 
					this.contractForm = {}
				} else {
					this.isHaveContract = true
					this.contractForm = response.data.data.list
				}
				console.log("是否有数据", this.isHaveContract)																																																																																																																																																																																																																						
			},


		},
	};
</script>

<style scoped>
	.noData {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		font-size: 32rpx;
		color: #757575;
		margin-top: 50rpx;
	}
	.noDataImg {
		width: 400rpx;
		height: 300rpx;
	}
	.DataList {
		width: 750rpx;
	}
	.indexBottom {
		margin: 20rpx auto;
		width: 710rpx;
	}
	.contractItem {
		display: flex;
		box-sizing: border-box;
		margin-bottom: 20rpx;
		padding: 20rpx;
		width: 710rpx;
		height: 220rpx;
		background-color: #ffffff;
		border-radius: 20rpx;
	}
	.contractItem .contractLeft {
		display: flex;
		align-items: center;
		width: 120rpx;
		height: 180rpx;

	}
	.contractItemImage {
		padding: 10rpx;
		width: 90rpx;
		height: 90rpx;
	}
	
	.contractItem .contractRight {
		width: 550rpx;
		height: 180rpx;

	}
	.contractItem .contractRight .contractRightTop {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 550rpx;
		height: 100rpx;

	}
	.contractText {
		font-size: 34rpx;
	}
	.contractStatus {
		font-size: 30rpx;
	}
	.contractItem .contractRight .contractRightBottom {
		display: flex;
		flex-direction: column;
		width: 550rpx;
		height: 70rpx;

	}
	.contractPeople {
		font-size: 30rpx;
		color: #646464;
	}
	.contractTime {
		font-size: 26rpx;
		color: #c1c1c1;
	}
</style>